<style lang="scss">
  .data-quarter {
    padding: 0;
  }
  .data-quarter-popover {
    margin: -12px;
    .quarter-table {
      width: 100%;
      td {
        .cell {
          width: 60px;
          height: 32px;
          display: block;
          line-height: 32px;
          text-align: center;
        }
        &.current:not(.disabled) {
          .cell {
            color: $light-blue;
          }
        }
      }
    }
  }
</style>
<template>
  <el-popover
    placement="bottom-start"
    width="320"
    trigger="manual"
    :disabled="disabled"
    v-model="show"
    v-clickoutside="hide"
    class="el-picker-panel el-date-picker data-quarter"
  >
    <template slot="reference">
      <el-input @click.native="showPopover" clearable readonly :placeholder="placeholder" :value="inputText">
        <span class="el-input__suffix" v-if="!disabled && clearable" @click.prevent.stop="clear" slot="suffix">
          <span class="el-input__suffix-inner">
            <i class="el-input__icon el-icon-circle-close el-input__clear"></i>
          </span>
        </span>
      </el-input>
    </template>

    <div class="data-quarter-popover el-picker-panel__body-wrapper">
      <div class="el-picker-panel__body">
        <div class="el-date-picker__header el-date-picker__header--bordered">
          <button
            type="button"
            @click="prevYear"
            aria-label="上一年"
            class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left">
          </button>
          <span role="button" class="el-date-picker__header-label">{{ year }} 年</span>
          <button
            type="button"
            @click="nextYear"
            aria-label="下一年"
            class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right">
          </button>
        </div>

        <div class="el-picker-panel__content">
          <table class="quarter-table" style="">
            <tbody>
              <tr>
                <td :key="item.value" @click.prevent="setQuarter(item.value)" v-for="item in quarterList" :class="{current: item.value == currentQuarter}"><a class="cell">{{ item.text }}</a></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </el-popover>
</template>

<script>
import clickoutside from '@/directive/clickoutside'
import moment from 'moment'
export default {
  name: 'date-quarter',
  directives: {clickoutside},
  props: {
    value: {
      type: [Number, String, Date],
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    clearable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      year: this.getDefaultValue().year(),
      currentQuarter: '',
      show: false,
      quarterList: [
        {text: '第一季度', value: 1},
        {text: '第二季度', value: 2},
        {text: '第三季度', value: 3},
        {text: '第四季度', value: 4}
      ]
    }
  },
  computed: {
    inputText() {
      if (this.currentQuarter) {
        return `${this.year} 年 ${this.currentQuarter} 季度`
      }
      return ''
    }
  },
  watch: {
    value(val, oldVal) {
      if (val === oldVal) {
        return
      }
      if (!val) { this.clear() }
    }
  },
  methods: {
    // 上一年
    prevYear() {
      this.year--
    },
    // 下一年
    nextYear() {
      this.year++
    },
    // 默认时间
    getDefaultValue() {
      // if default-value is set, return it
      // otherwise, return now (the moment this method gets called)
      return this.value ? moment(this.value) : moment()
    },
    // 清空数据
    clear() {
      this.currentQuarter = ''
      this.year = this.getDefaultValue().year()
    },
    // 展示选择器
    hide() {
      this.show = false
    },
    // 隐藏选择器
    showPopover() {
      this.show = true
    },
    setQuarter(val) {
      this.currentQuarter = val
      this.$emit('input', moment(this.year, 'YYYY').quarter(val).format('YYYY-MM-DD'))
      this.hide()
    }
  }
}
</script>
